<script setup lang="ts">
import { ElSpace, ElButton } from 'element-plus';
import { Share, More } from '@element-plus/icons-vue';
import { Welcome } from "@artmate/chat";
</script>

<template>
  <div class="variant-demo">
    <Welcome
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*k0oYSZQMoBwAAAAAAAAAAAAADgCCAQ/original"
      title="欢迎使用 ArtChat"
      description="ArtChat 是一个基于 Vue3 的 AI 聊天界面组件库。基于 RICH 设计范式，提供了丰富的组件和功能，帮助你快速构建智能对话界面。"
      variant="borderless"
    >
      <template #extra>
        <ElSpace>
          <ElButton type="info">
            <template #icon>
              <Share />
            </template>
          </ElButton>
          <ElButton type="info">
            <template #icon>
              <More />
            </template>
          </ElButton>
        </ElSpace>
      </template>
    </Welcome>
  </div>
</template>

<style scoped>
.variant-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
